/* 轮播图容器样式 */
.carousel-inner {
    width: 100%;
    height: 600px; /* 或者您希望的高度 */
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

/* 轮播图片样式 */
.item {
    width: 100%; /* 调整宽度为100%以充满容器 */
    height: 100%; /* 同样高度也设为100% */
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    transition: opacity 0.5s ease-in-out; /* 平滑过渡效果 */
}
.item img {
    width: 100%; /* 保持图片宽度100%适应容器 */
    height: auto; /* 将高度设置为auto以维持图片的原始宽高比 */
    object-fit: cover; /* 保持宽高比并填充容器，这将自动调整图片大小以填充容器而不扭曲图片 */
    object-position: center center; /* 图片居中对齐 */
    display: block; /* 确保图片作为块级元素显示 */
}

.item.active { /* 控制显示的图片 */
    display: block;
}

/* 缩略图容器样式 */
.thumbnail-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 50px;
}

/* 单个缩略图样式 */
.thumbnail {
    width: 300px;
    height: 400px;
    margin: 0 10px;
    cursor: pointer;
    border: 1px solid #ccc;
    transition: border-color 0.3s; /* 鼠标悬停时边框颜色变化 */
    overflow: hidden;
}
/* 确保图片按比例缩放并填充容器 */
.thumbnail img {
    width: 70%;
    height: 60%;
    object-fit: cover;
}

.thumbnail:hover {
    border-color: #000;
}

/* 当前选中缩略图样式 */
.thumbnail.active {
    border-color: #007bff; /* 选择强调色 */
}